<template>
	<view class="gm-box" v-if="active?.id || (coupon_list && coupon_list.length > 0)" @click="promClick">
		<view class="pml">

			<!-- 折扣 -->
			<view class="pm-item" v-if="active?.id">
				<view class="pm-tb">
					<view class="pm-tag">
						{{ active.type_name }}
					</view>
				</view>
				<view class="pm-t text-limit-1">
					{{ active.desc || active.name }}
				</view>
			</view>

			<!-- 领券 -->
			<view class="pm-item pm-cp" v-if="coupon_list && coupon_list.length > 0">
				<view class="pm-tb">
					<view class="pm-tag"> 领券 </view>
				</view>
				<view class="pm-t-cp">
					<view class="pmc" v-for="(item, index) in coupon_list" :key="index">{{ item.name }}</view>
				</view>
			</view>

		</view>
		<view class="pmr">···</view>
	</view>
</template>

<script setup>
const props = defineProps({
	goods: {
		type: Object,
		default: {}
	},
	active: {
		type: Object,
		default: {}
	},
	coupon_list: {
		type: Array,
		default: []
	}
})
const emit = defineEmits(['promClick']);

function promClick() {
	console.log(111)
	emit('promClick')
}
</script>

<style lang="scss" scoped>
.gm-box {
	margin-top: 20rpx;
	background: #fff;
	padding: 20rpx 24rpx 4rpx;
	position: relative;
	display: flex;
	font-size: 24rpx;

	.pmr {
		width: 80rpx;
		line-height: 90rpx;
		text-align: center;
		position: absolute;
		right: 0;
		top: 0;
		color: #000;
	}

	.pml {
		flex: 1;

		.pm-item {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.pm-tb {
				width: auto;
				min-width: 100rpx;
				display: flex;
				align-items: center;
				margin-right: 10rpx;
			}

			.pm-tag {
				width: auto;
				// height: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				display: inline-block;
				font-size: 20rpx;
				background: $main_color;
				border: 1px solid $main_color;
				color: #fff;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
			}

			.pm-t-cp {
				flex: 1;
				// padding-left: 24rpx;
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				position: relative;
				top: 4rpx;

				.pmc {
					position: relative;
					display: inline-block;
					// height: 32rpx;
					padding: 2rpx 10rpx;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					line-height: 28rpx;
					font-size: 18rpx;
					color: #f00;
					border: 1px solid #f00;
					border-radius: 6rpx;

					&::before {
						position: absolute;
						top: 8rpx;
						left: -2rpx;
						width: 6rpx;
						height: 10rpx;
						background: url("https://img.hltmsp.com/81/46/f9/8146f9e212d17151d0a6698ee1f35029.png");
						background-size: 6rpx auto;
						content: "";
					}

					&::after {
						position: absolute;
						top: 8rpx;
						right: -2rpx;
						width: 6rpx;
						height: 10rpx;
						background: url("https://img.hltmsp.com/15/c0/b4/15c0b4369d7e9130b3ba7a9ac923c0c5.png");
						background-size: 6rpx auto;
						content: "";
					}
				}
			}

			&:first-child {
				margin-top: 10rpx;
			}
		}

		.pm-cp {
			align-items: flex-start;
		}
	}
}
</style>
